<template>
	<view class="content">
		<text class="status" v-if="status==1">待核销</text>
		<text class="status" v-if="status==2">已完成</text>
		<text class="status" v-if="status==3">已过期</text>
		<view class="qrcodeBoxOut" v-if="status==1&&data.id>0">
			<view class="qrcodeBox">
				<u-qrcode ref="qrcode" class="qrcode" canvas-id="qr" :value="'2&'+data.id" :size="size"
					:options="{ margin: 10 }"></u-qrcode>
			</view>
		</view>
		<view class="itemBox">
			<view class="titleBox">
				<view class="titleLine"></view>
				<text class="title">报名信息</text>
			</view>
			<view class="line"></view>
			<view class="item">
				<text class="info">主办方 ：</text>
				<text class="info">{{data.communityActivity.sponsor}}</text>
			</view>
			<view class="item">
				<text class="info">活动名称 ：</text>
				<text class="info">{{data.communityActivity.name}}</text>
			</view>
			<view class="item">
				<text class="info">活动地址 ：</text>
				<text class="info">{{data.communityActivity.address}}</text>
			</view>
			<view class="item">
				<text class="info">活动时间 ：</text>
				<text class="info"
					v-if="data.id>0">{{$timestampToTime(data.communityActivity.start_time)}}至{{$timestampToTime(data.communityActivity.end_time)}}</text>
			</view>
			<view class="item">
				<text class="info">姓名 ：</text>
				<text class="info">{{data.name}}</text>
			</view>
			<view class="item">
				<text class="info">年龄 ：</text>
				<text class="info">{{data.age}}</text>
			</view>
			<view class="item">
				<text class="info">电话号码 ：</text>
				<text class="info">{{data.phone}}</text>
			</view>
			<view class="item">
				<text class="info">是否是业主 ：</text>
				<text class="info" v-if="data.is_owner==1">是</text>
				<text class="info" v-else>否</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				text: '',
				size: 120,
				id: '', //订单id
				status: 1,
				data: '',
			}
		},
		onShow() {
			let pagearr = getCurrentPages();
			let currentPage = pagearr[pagearr.length - 1];
			this.id = currentPage.options.id;
			this.status = currentPage.options.status;
			//查询预约详情
			this.$request.get(`CommunityActivityApply/user_activity_details?id=${this.id}`).then(res => {
				this.data = res.data.data;
			})
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.status {
		display: block;
		width: 100%;
		text-align: center;
		font-family: 'ab';
		font-size: 44rpx;
		color: #D95945;
		margin-top: 80rpx;
	}

	.itemBox {
		width: 600rpx;
		margin-top: 90rpx;
		margin-left: 75rpx;
		display: flex;
		flex-direction: column;

		.line {
			width: 100%;
			height: 1rpx;
			background-color: #141414;
			margin-top: 50rpx;
			margin-bottom: 55rpx;
		}

		.item {
			margin-bottom: 35rpx;
			display: flex;
			justify-content: space-between;

			.info {
				font-size: 25rpx;
				color: #141414;
				font-family: 'ar';
			}

			.price {
				color: #f08329;
			}
		}

		.titleBox {
			width: 100%;
			display: flex;

			.titleLine {
				background-color: #D95945;
				width: 4rpx;
				height: 28rpx;
				margin-top: 7rpx;
			}

			.title {
				font-size: 28rpx;
				color: #141414;
				margin-left: 30rpx;
				font-family: 'am';
			}
		}
	}

	.qrcodeBoxOut {
		width: 670rpx;
		// height: 616rpx;
		margin-left: 40rpx;
		margin-top: 40rpx;

		.qrcodeBox {
			position: relative;
			display: block;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			width: 120px;
			height: 120px;
			margin: 0 auto;
			overflow: hidden;
			// padding: 10rpx;
			// border: 1rpx solid #000000;
			// border-radius: 10rpx;
			// background-color: red;
		}
	}

	.content {
		position: fixed;
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		overflow-x: hidden;
		background-color: #fff;
	}

	page {
		width: 100%;
		height: 100%;
		overflow-y: scroll;
		background-color: #fff !important;
		padding-bottom: 0 !important;
	}
</style>